<script setup>
import { onMounted, reactive, ref } from 'vue'
import { queryBaseIndexPull } from '@api/city-index'

defineProps({
  disabled: Boolean,
})

const formRef = ref()

const form = reactive({
  indexName: '',
  // areaId: '',
  // areaName: '',
  year: '',
  explain: '',
})

const emit = defineEmits(['changeBaseIndex'])

// const user = JSON.parse(localStorage.getItem('user')).user
// form.areaId = user.refId
// form.areaName = user.areaName

const formRules = {
  indexName: [{ required: true, message: '请输入指标名称', trigger: 'blur' }],
  // areaId: [{ required: true, message: '请选择体检城市', trigger: 'change' }],
  year: [{ required: true, message: '请输入体检年份', trigger: 'blur' }],
}

const indicatorTypeOptions = ref([])

const getIndexPull = () => {
  queryBaseIndexPull().then((res) => {
    if (res.success) {
      // console.log(res.data)
      indicatorTypeOptions.value = res.data
    }
  })
}

onMounted(() => {
  getIndexPull()
})

const getValues = () => {
  return { ...form }
}

const validate = () => {
  return formRef.value.validate()
}

const inputData = (obj) => {
  Object.assign(form, obj)
}

defineExpose({
  getValues,
  validate,
  inputData,
})

const handleChangeIndexName = (item) => {
  const find = indicatorTypeOptions.value.find((i) => i.indexName === item)
  if (find) {
    Object.assign(form, {
      year: find.year,
      baseId: find.pkid,
    })
    emit('changeBaseIndex', find.pkid)
  }
}
</script>

<template>
  <div class="base-info">
    <div class="content-title">
      <svg-icon icon-class="标题图标" />
      <span>基本信息</span>
    </div>
    <el-form
      ref="formRef"
      :model="form"
      :rules="formRules"
      label-position="top"
    >
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="指标体系名称" prop="indexName">
            <el-select
              v-model="form.indexName"
              placeholder="请选择指标体系名称"
              @change="handleChangeIndexName"
              :disabled="disabled"
            >
              <el-option
                v-for="item in indicatorTypeOptions"
                :key="item.pkid"
                :label="item.indexName"
                :value="item.indexName"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <!--        <el-col :span="8">-->
        <!--          <el-form-item label="体检城市" prop="areaId">-->
        <!--            <el-input v-model="form.areaName" disabled />-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col :span="8">
          <el-form-item label="体检年份" prop="year">
            <el-input
              disabled
              type="number"
              v-model="form.year"
              placeholder="请输入体检年份"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="指标体系说明" prop="explain">
            <el-input
              type="textarea"
              :rows="3"
              v-model="form.explain"
              placeholder="请输入指标体系说明"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
.base-info {
  :deep(.el-form) {
    .el-input__inner {
      background: #f9fbff;
      border-radius: 4px;
      border: 1px solid #e1ecf5;
      width: 300px;
    }

    .el-textarea__inner {
      background: #f9fbff;
      border-radius: 4px;
      border: 1px solid #e1ecf5;
      font-family: Arial;
    }

    .el-form-item {
      margin-bottom: 0;
    }

    .el-form-item__label {
      padding-bottom: 0;
    }
  }
}
</style>
